import React, { useState, useEffect, FC } from 'react';
import axios from 'axios';
import {useNavigate} from 'react-router-dom'
import { Item } from "../utils/types"
interface IAppProps extends Item {

}

const App: FC<IAppProps> = () => {
    const [data, setData] = useState([]);
    const navigate=useNavigate()
    useEffect(() => {
        axios.get('/api/category').then((res) => {
            console.log(res.data.data);
            setData(res.data.data)
        })
    }, [])
    const goArticle=(item:any)=>{
        navigate(`/article`,{
            state:{
                item
            }
        })
    }

    return (
        <div>
            <h4><b>文章分类</b></h4>
            {
                data.map((item: Item, index: number) => {
                    return <ul key={index}>
                        <li onClick={()=>goArticle(item)}>{item.label} 
                            <span>共计 { data.length } 篇文章</span>
                        </li>
                    </ul>
                })
            }
        </div>
    )
};

export default App
